<template>
    <div class="login">
        <div class="all_box">
            <div class="logo">
                <div class="warp">
                    <img src="@/assets/logo.png" alt="" @click="goHome">
                </div>
                
            </div> 
            <div class="login_box">
                <div class="word_l">
                    <p class="up_w">
                        <img src="@/assets/home/word_big.png" alt="">
                    </p>
                    <div class="QR_code_box">
                        <div class="QR_code_item left_qr">
                            <img src="@/assets/item_form.png" alt="">
                            <p>扫码下载盟拍网app</p>
                            <p>随时随地参与竞拍</p>
                        </div>
                        <div class="QR_code_item">
                            <img src="@/assets/QR_code/code_gzh.jpg" alt="">
                            <p>扫码关注盟拍公众号</p>
                            <p>更多惊喜等着你</p>
                        </div>
                    </div>
                </div>
                <div class="box" v-show="forget=='1'">
                    <div class="title-container">
                        <h4>欢迎登录</h4>
                    </div>
                    <div class="login_type">
                        <p @click="passWordShow" :class='{l_foucs:loginShow=="1"}'>密码登录</p>
                        <p @click="noteShow" :class='{l_foucs:loginShow=="2"}'>短信登录</p>
                    </div>
                    <el-form
                        v-if="loginShow=='1'"
                        ref="passLoginForm"
                        :model="passLoginForm"
                        :rules="passLoginRules"
                        class="login_form"
                        auto-complete="on"
                        label-position="left"
                        >
                        <el-form-item prop="username">
                            <el-input
                            prefix-icon="el-icon-user"
                            ref="username"
                            v-model="passLoginForm.username"
                            placeholder="用户名"
                            name="username"
                            type="text"
                            tabindex="1"
                            auto-complete="on"
                            clearable
                            />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                            prefix-icon="el-icon-lock"
                            ref="password"
                            v-model="passLoginForm.password"
                            type="password"
                            placeholder="密码"
                            name="password"
                            tabindex="2"
                            auto-complete="on"
                            clearable
                            @keyup.enter.native="loginPasswordEvent"
                            />
                        </el-form-item>
                    </el-form>

                    <el-form
                        v-if="loginShow=='2'"
                        ref="noteLoginForm"
                        :model="noteLoginForm"
                        :rules="noteLoginRules"
                        class="login_form"
                        auto-complete="on"
                        label-position="left"
                        >
                        <el-form-item prop="mobile">
                            <el-input
                            prefix-icon="el-icon-mobile-phone"
                            ref="username"
                            v-model="noteLoginForm.mobile"
                            placeholder="手机号"
                            name="username"
                            type="text"
                            tabindex="1"
                            auto-complete="on"
                            clearable
                            />
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-input 
                            placeholder="请输入验证码" 
                            v-model="noteLoginForm.code"
                            @keyup.enter.native="loginCodeEvent">
                                <el-button slot="append" :disabled="disabled" @click="getverCode(noteLoginForm.mobile)">
                                    <span>{{btnTxt}}</span>
                                </el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>
                        <p @click="forget='2'" class="forgetPW">
                        <span>忘记密码？</span>
                        </p>
                        <!-- :loading="loading" -->
                        <el-button
                            type="danger"
                            style="width: 100%; margin-bottom: 10px;height:48px"
                            @click.native.prevent="handleLogin"
                            >登录</el-button
                        >
                        <el-button
                            plain
                            style="width: 100%;height:48px;margin-left:0px"
                            @click.native.prevent="registerGo"
                            >注册</el-button
                        >
                </div>
                <!-- ------- -->
                <div class="box" v-show="forget=='2'">
                    <div class="title-container">
                        <h4>忘记密码</h4>
                    </div>
                    <el-form
                        ref="forgetForm"
                        :model="forgetForm"
                        :rules="forgetRules"
                        class="forget_form"
                        auto-complete="on"
                        label-position="left"
                        >
                        <el-form-item prop="mobile">
                            <el-input
                            prefix-icon="el-icon-mobile-phone"
                            ref="username"
                            v-model="forgetForm.mobile"
                            placeholder="手机号"
                            name="username"
                            type="text"
                            tabindex="1"
                            auto-complete="on"
                            clearable
                            />
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-input 
                            placeholder="请输入验证码" 
                            v-model="forgetForm.code"
                            @keyup.enter.native="loginCodeEvent">
                                <el-button slot="append" :disabled="disabled" @click="getverCode(forgetForm.mobile)">
                                    <span>{{btnTxt}}</span>
                                </el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input placeholder="请输入新密码" type="password" v-model="forgetForm.password" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item prop="checkPass">
                            <el-input placeholder="请再次输入新密码" type="password" v-model="forgetForm.checkPass" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                        <el-button
                            type="danger"
                            style="width: 100%; margin-bottom: 10px;height:48px"
                            @click.native.prevent="forgetPassword"
                            >提交</el-button>
                            <div class="goback" @click="forget='1'">
                                <i class="el-icon-back">返回</i>
                            </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import { bidderLogin,bidderMobileLogin,getCode,verifyCode,changePasswordUser} from '@/api/user'
import {_debounce} from '@/utils/auth'
export default{
    name:'login',
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入密码'));
            } else {
            if (this.forgetForm.checkPass !== '') {
                this.$refs.forgetForm.validateField('checkPass');
            }
            callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.forgetForm.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        const validatePhone = (rule, value, callback) => {
            // 判断输入框中是否输入手机号
            if (!value) {
                callback(new Error('手机号不能为空'))
            }
            //正则表达式进行验证手机号，从1开始，第二位是345789中的任意一位，以9数字结尾
            if (!/^1[345789]\d{9}$/.test(value)) {
                callback(new Error('手机号格式不正确'))
            }
            callback()
        }
        return{
            passLoginForm: {
                username: "",
                password: "",
            },
            passLoginRules:{
                username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
                password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
            },
            noteLoginForm:{
                mobile: "",
                code: "", 
            },
            btnTxt: "获取验证码",
            // 是否禁用  即点击之后一段时间内无法再点击
            disabled: false,
            time: 0,
            noteLoginRules:{
                mobile:[
                { required: true, trigger: 'blur', message: '请输入11位手机号'},
                { required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
                { required: true, trigger: 'blur', validator: validatePhone}
                ],
                code:[
                { required: true, trigger: 'blur', message: '请输入6位验证码'},
                { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}    
                ],
            },
            forgetForm:{
                mobile:'',
                code: "", 
                password: "",
                checkPass:''
            },
            forgetRules:{
                mobile:[{ required: true, trigger: 'blur', message: '请输入手机号'},{ required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},],
                code: [{ required: true, trigger: 'blur', message: '请输入验证码'},{ required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'} ], 
                password: [{ required: true, validator: validatePass, message: '请输入密码'}],
                checkPass:[{ required: true, validator: validatePass2, message: '请再次重复密码'}],
            },
            loginShow:'1',
            forget:'1',
            l_foucs:'l_foucs',
            
        }
    },
    created(){
        this.$emit('public_header', {header:false,footer:true});
    },
    methods:{
        handleLogin:_debounce(function(){
            if(this.loginShow =='1'){
                this.$refs.passLoginForm.validate(valid => {
                    if (valid) { 
                        //账号密码登录
                        // console.log('zhixing')
                        this.$store.dispatch('bidderLogin', this.passLoginForm).then(() => {
                            this.$router.push({ path: '/' })
                            // this.loading = false
                        }).catch(() => {
                            // this.loading = false
                        })
                    }
                });
                
            }else{
                this.$refs.noteLoginForm.validate(valid => {
                    if (valid) { 
                        //手机号验证码登录
                        this.$store.dispatch('bidderMobileLogin', this.noteLoginForm).then(() => {
                            this.$router.push({ path: '/' })
                            // this.loading = false
                        }).catch(() => {
                            // this.loading = false
                        })
                    }
                });
                
            }
        }),
        //忘记密码
        forgetPassword(){
            this.$refs.forgetForm.validate(valid => {
                if (valid) { 
                    verifyCode({mobile:this.forgetForm.mobile,code:this.forgetForm.code}).then(res=>{
                        if(res.code == 200){
                            this.modificationPassword();
                        }else{
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            })
                        }
                    }).catch(err=>{
                        if(err.code== -200){
                            this.$message({
                                message: err.msg,
                                type: 'error'
                            })
                        }
                    });
                }
            });
        },
        modificationPassword(){
            changePasswordUser({mobile:this.forgetForm.mobile,password:this.forgetForm.password}).then(res=>{
                if(res.code == 200){
                    this.$message({
                        message: '密码修改成功',
                        type: 'success'
                    });
                    this.forget='1';
                    this.$refs.forgetForm.resetFields();
                }else{
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                }
            }).catch(err=>{
                this.$message({
                    message: err.msg,
                    type: 'error'
                })
            });
        },
        getverCode(mobileVal){
            // 校验手机号码
            if (!mobileVal) {
                //号码校验不通过
                this.$message({
                message: '请输入手机号',
                type:'warning',
                });
                //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
            } else if (!/1[35789]\d{9}/.test(mobileVal)) {
                // 失去焦点后自动触发校验手机号规则
            } else {
                this.time = 60;
                this.disabled = true;
                //调用倒计时方法
                this.timer();
                getCode({mobile:mobileVal}).then(res=>{
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                })
            }
        },
        // 倒计时方法
        timer() {
            if (this.time > 0) {
                this.time--;
                // console.log(this.time);
                // this.btnTxt = this.time + "s后重新获取验证码";
                this.btnTxt = "已发送" + this.time + 's';
                setTimeout(this.timer, 1000);
            } else {
                this.time = 0;
                this.btnTxt = "获取验证码";
                this.disabled = false;
            }
        },
        registerGo(){
            this.$router.push({path:'/user/register'})
        },
        passWordShow(){
            this.loginShow ='1';
        },
        noteShow(){
            this.loginShow ='2'
        },
        // 密码输入框 回车键盘事件
        loginPasswordEvent(){
            this.$refs.passLoginForm.validate(valid => {
                if (valid) { 
                    this.$store.dispatch('bidderLogin', this.passLoginForm).then(() => {
                        this.$store.dispatch('getUserInfo');
                        this.$router.push({ path: '/' })
                        // this.loading = false
                    }).catch(() => {
                        // this.loading = false
                    });
                }
            }); 
        },
        // 手机号登录-验证码 回车键盘事件
        loginCodeEvent(){
            this.$refs.noteLoginForm.validate(valid => {
                if (valid) { 
                     //手机号验证码登录
                    this.$store.dispatch('bidderMobileLogin', this.noteLoginForm).then(() => {
                        this.$store.dispatch('getUserInfo');
                        this.$router.push({ path: '/' })
                        // this.loading = false
                    }).catch(() => {
                        // this.loading = false
                    })
                }
            });
        },
        goHome(){
            this.$router.push({path:'/'});
        }
    }
}
</script>
<style lang="less" scoped>
@import '@/styles/index.less';
.login{
    // height: 100%;
    // width: 100%;
    // position: absolute;
    .all_box{
        width: 100%;
        
    }
    .logo{
        height: 100px;
        display: flex;
        align-items: center;
        // box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .1);
        img{
            width: 150px;
            vertical-align: middle;
        }
    }
    .login_box{
        .word_l{
            width: 700px;
            margin-right: 100px;
            color: #fff;
            text-align: center;
            .QR_code_box{
               display: flex;
               justify-content: center;
               .left_qr{
                margin-right: 70px;
               }
               .QR_code_item{
                text-align: center;
                img{
                    width: 90px;
                    height: 90px;
                }
                font-size: 12px;
                color: #fff;
               } 
            }
            .up_w{
                height: 150px;
                width: 600px;
                img{
                    height: 50px;
                    width: 700px;
                }
            }
        }
        background: url('@/assets/firmIn/未标题-1.png') no-repeat;
        background-size: 100% 100%;
            // height: 83%;
            
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
        .box{
                padding: 25px 30px;
                background-color: #fff;
                box-shadow: 0 3px 6px -1px rgb(0 0 0 / 19%);
                box-sizing: border-box;
                border-radius: 14px;
                width: 400px;
                overflow: hidden;
                background: #ffffff;
                .login_type{
                    display: flex;
                    justify-content: space-around;
                    font-size: 16px;
                    padding: 20px 0px;
                    
                }
                .forgetPW{
                    text-align: right;
                    color: #999;
                    font-size: 14px;
                    span{
                        display: inline-block;
                        padding: 6px;
                        cursor: pointer;
                    }
                }
        }
    }
    .forget_form{
        margin-top: 17px;
        /deep/.el-form-item{
            margin-bottom: 15px;
        }
    }
    .goback{
        color: #999;
        font-size: 14px;
    }
.l_footer{
    height: 300px;
    color: #999;
    background-color: #fff;
    .l_footer_phone{
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        p{
            padding-top: 10px;
        }
    }
}
    .l_foucs{
        color:@base-color;
        font-weight: bold;
    }
    .el-button--danger{
        background-color: #f03621;
        border-color: #d13a29;
    }

}
</style>